<template>
  <v-layout>
    <template #header>
      <el-button type="primary" @click="toAdd">添加</el-button>
    </template>
    <v-table url="/register/queryAllUser" ref="tableRef">
      <!-- <v-column auto type="selection"></v-column> -->
      <v-column auto prop="name" label="名称"></v-column>
      <v-column auto prop="cvendorid" label="所属供应商名称"></v-column>
      <v-column auto prop="code" label="编码"></v-column>
      <v-column auto prop="user" label="联系人"></v-column>
      <v-column auto prop="number" label="联系电话"></v-column>
      <v-column auto prop="status" label="状态">
        <template #default="{ row }">
          <el-tag type="danger" v-if="row.status==='1'">禁用</el-tag>
          <el-tag type="success" v-else>启用</el-tag>
        </template>
      </v-column>
      <v-column auto prop="createTime"  :formatter="dateFormat" label="创建时间"></v-column>
      <v-column auto label="操作">
        <template #default="{ row }">
          <el-button size="small" @click="toUp(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="toDel(row)"
            >删除</el-button
          >
        </template>
      </v-column>
    </v-table>
  </v-layout>

  <v-dialog
    v-model="addVisible"
    title="新增"
    width="400px"
    @confirm="add"
    :action-loading="addLoading"
    @closed="addReset"
  >
    <el-form
      :model="addForm"
      :rules="rules"
      ref="addFormRef"
      label-position="top"
    >
      <el-form-item prop="company" label="名称">
        <el-input placeholder="请输入名称" v-model="addForm.name"></el-input>
      </el-form-item>
      <el-form-item prop="number" label="联系电话">
        <el-input placeholder="请输入联系电话" v-model="addForm.number"></el-input>
      </el-form-item>
      <el-form-item prop="code" label="编码">
        <el-input placeholder="请输入编码" v-model="addForm.code"></el-input>
      </el-form-item>
      <el-form-item prop="vendorid" label="供应商信息">
        <el-select v-model="addForm.vendorid" placeholder="请选择供应商">
          <el-option
            v-for="item in vendorList"
            :key="item.id"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="username" label="联系人">
        <el-input placeholder="请输入联系人" v-model="addForm.user"></el-input>
      </el-form-item>
    </el-form>
  </v-dialog>
  <v-dialog
    v-model="upVisible"
    title="编辑"
    width="400px"
    @confirm="up"
    :action-loading="upLoading"
    @closed="upReset"
  >
    <el-form
      :model="upForm"
      :rules="rules"
      ref="upFormRef"
      label-position="top"
    >
    <el-form-item prop="name" label="名称">
        <el-input placeholder="请输入名称" v-model="upForm.name"></el-input>
      </el-form-item>
      <el-form-item prop="number" label="联系电话">
        <el-input placeholder="请输入联系电话" v-model="upForm.number"></el-input>
      </el-form-item>
      <el-form-item prop="code" label="编码">
        <el-input placeholder="请输入编码" disabled v-model="upForm.code"></el-input>
      </el-form-item><el-form-item  prop="vendorid" label="供应商信息">
        <el-select v-model="upForm.vendorid" disabled placeholder="请选择供应商">
          <el-option
            v-for="item in vendorList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="status" label="用户状态">
        <el-radio-group v-model="upForm.status">
          <el-radio label="0">启用</el-radio>
          <el-radio label="1">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="field1" label="联系人">
        <el-input placeholder="请输入联系人" v-model="upForm.user"></el-input>
      </el-form-item>
      
    </el-form>
  </v-dialog>
</template>

<script setup lang="ts">
import { useTable } from "@/components/table/useTable";
import { useSubmit } from "@/hooks/useSubmit";
import { useUserStore } from "@/stores/user";
import { Delete } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox, type FormRules } from "element-plus";
import { markRaw, reactive, ref } from "vue";

import { insertPartner, upPartner, deletePartner,getVendorData1} from "@/api/user";
import type { partnerData,vendorData,userfile } from "@/api/user/model";
interface Data {
  id: string;
  name: string;
  code: string
  user: string;
  number: string;
  status: string;
  createTime: string;
  cvendorid: null;
}

const rules: FormRules = {
  number: [
    { required: true, message: "字电话号不能为空", trigger: "change" },
    { min: 11, max: 11, message: "电话号长度11位", trigger: "change" },
  ],
  name: [{ required: true, message: "公司名称不能为空", trigger: "change" }],
  user: [{ required: true, message: "负责人名称不能为空", trigger: "change" }],
  code: [{ required: true, message: "编码不能为空", trigger: "change" }],
 };

 const vendorList = ref<vendorData[]>([]);
  const { tznUser } = useUserStore();
//获取人员信息
getVendorData1(tznUser.name).then((data) => {
  vendorList.value = data;
  
  
});

// const arrList = retArrayAndObjList(1, vendorList)


const { tableRef, getSelectionRows, reload } = useTable();
//时间格式化
const dateFormat =  (row) => {
    let time = new Date(row.createTime)
    if(!time){
        return ''
    }
    var Y = time.getFullYear();
	var M = (time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1);
	var D = (time.getDate() < 10 ? '0' + time.getDate() : time.getDate());
	var h = (time.getHours() < 10 ? '0' + time.getHours() : time.getHours());
	var m = (time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes());
	var s = (time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds());

    return `${Y}/${M}/${D} ${h}:${m}:${s}`
}
// 新增
const addForm = reactive<partnerData>({
  name: "",
  user: "",
  number: "",
  vendorid: "",
  code: ""
});
const addVisible = ref(false);
const toAdd = () => {
  addVisible.value = true;
};
const {
  loading: addLoading,
  submit: add,
  formRef: addFormRef,
  reset: addReset,
} = useSubmit({
  form: addForm,
  ajax: async () => {
    await insertPartner(addForm);
    ElMessage.success("添加合作商信息成功");
    reload();
    addVisible.value = false;
  },
});

// 编辑
const upForm = reactive<partnerData>({
  id:"",
  name: "",
  user: "",
  number: "",
  vendorid: "",
  status:"",
  code: ""
});
const upVisible = ref(false);
const toUp = (row: Data) => {
  
  upVisible.value = true;
  upForm.id = row.id
  upForm.name = row.name;
  upForm.user = row.user;
  upForm.number = row.number;
  upForm.vendorid = row.cvendorid;
  upForm.code = row.code;
  upForm.status=row.status
};
const {
  loading: upLoading,
  submit: up,
  formRef: upFormRef,
  reset: upReset,
} = useSubmit({
  form: upForm,
  ajax: async () => {
    await upPartner(upForm);
    ElMessage.success("编辑合作商信息成功");
    reload();
    upVisible.value = false;
  },
});

// 删除
const toDel = (row?: Data) => {
  let delRows: Data[] = [];
  if (row) {
    // 单选删除
    delRows.push(row);
  } else {
    // 多选删除
    const selection = getSelectionRows();
    if (!selection || !selection.length) {
      ElMessage.warning("至少选择一条数据");
      return;
    }
    delRows = selection;
  }
  ElMessageBox.confirm("数据将被永久删除，是否确定？", "提示", {
    type: "warning",
    icon: markRaw(Delete),
    async callback(action: string) {
      if (action === "confirm") {
        // 发送删除请求
        await deletePartner(delRows[0].id);
        ElMessage.success("删除合作商信息成功");
        reload();
      }
    },
  });
};
</script>
